Slope Chart

Compares values between two points in time, visually representing the magnitude and direction of change. This provides a clear and concise visualization of the changes between two time periods. It is useful for tracking progress, identifying significant changes, and understanding the impact of interventions.

Chart:

Code:

  muze
    .canvas()
    .columns(["Year"])
    .rows([
      ["Maker", "Miles_per_Gallon"],
      ["Maker", "Miles_per_Gallon"],
    ])
    .layers([
      {
        mark: "line",
        encoding: {
          color: {
            value: () => {
              return "#8DD3C7";
            },
          },
        },
      },
    ])
    .config({
      border: {
        showRowBorders: {
          top: false,
          bottom: false,
          left: false,
          right: false,
        },
        showColBorders: {
          top: false,
          bottom: false,
          left: false,
          right: false,
        },
        showValueBorders: {
          top: false,
          bottom: false,
          left: false,
          right: false,
        },
      },
      gridLines: {
        x: {
          show: false,
        },
        y: {
          show: false,
        },
      },
      axes: {
        x: {
          showAxisName: false,
          tickInterval: {
            step: "year",
            multiplier: 10,
          },
        },
        y: {
          fields: {
            Miles_per_Gallon: {
              showAxisName: false,
            },
          },
        },
      },
    })